<template>
	<view class="field-signature">
		<u-form-item
			:label="label"
			:required="required"
			:prop="prop"
			:right-icon="disabled ? '' : 'arrow-right'"
		>
			<view class="hand-sign-box" style="width: 100%">
				<view
					class="hand-sign"
					v-if="signatureInfo.imgUrl == null || signatureInfo.imgUrl === ''"
					@tap="openSignature"
				>
					<u-icon name="edit-pen" color="#5b5b5b" size="24" class="icon"></u-icon>
					<span style="line-height: 32rpx;">添加签名</span>
				</view>
				<view class="sign-preview" @tap="openSignature" @longpress="handleLongPress" v-else>
					<view class="preview-delete-icon" @tap.stop="deleteSignature" v-if="deleteable">
					<u-icon name="trash" color="#5b5b5b" size="32"></u-icon>
					</view>
					<image :src="signatureInfo.imgUrl" :style="{ height: this.height }" mode="aspectFit"></image>
				</view>
				<SignaturePadPopup :visible="showSignaturePad" autoTrim @close="close" @change="handleChange" v-model="signature"/>
			</view>
		</u-form-item>
	</view>
</template>

<script>
	import SignaturePadPopup from '@/views/components/SignaturePad/signatureDlg.vue';
	import { validateWidget } from '@/utils/validate.js';

	export default {
		emits: ['change','input'],
		components: {
			SignaturePadPopup
		},
		props: {
			value: {
			  type: String
			},
			label: {
				type: String
			},
			required: {
				type: Boolean,
				default: false
			},
			prop: {
				type: String
			},
			rules: {
				type: Array
			},
			disabled: {
			  type: Boolean,
			  default: false
			},
			width: {
			  type: [String, Number],
			  default: '100%',
			  required: false
			},
			height: {
			  type: [String, Number],
			  default: '100px',
			  required: false
			},
			backgroundColor: {
			  type: String,
			  required: false
			},
			penColor: {
			  type: String,
			  default: '#000000',
			  required: false
			},
			autoTrim: {
			  type: Boolean,
			  default: true,
			  required: false
			},
		},
		data() {
			return {
				showSignaturePad: false,
				signature: this.value,
				deleteable: false,
			}
		},
		watch: {
			value(v) {
				this.signature = v;
			}
		},
		computed: {
			signatureInfo() {
			  if (this.value == null || this.value === '') {
				return {
				  imgUrl: null,
				  bound: null
				};
			  } else {
				try {
				  const temp = JSON.parse(this.value);
				  return {
					imgUrl: temp.imgUrl,
					bound: temp.bound
				  };
				} catch {
				  return {
					imgUrl: this.value,
					bound: this.bound
				  };
				}
			  }
			}
		},
		methods: {
			validateWidget() {
				return new Promise((resolve, reject) => {
					validateWidget(this.rules, this.value).then(res => {
						this.errorMessage = '';
						resolve();
					}).catch(e => {
						this.errorMessage = e;
						resolve(e)
					});
				});
			},
			openSignature() {
				this.showSignaturePad = true;
				this.deleteable = false;
			},
			handleChange(res) {
				const result = {
					imgUrl: res.data,
					bound: res.bound
				}
				const str = JSON.stringify(result);
				this.$emit('input', str)
				this.$emit('change', str)
				this.showSignaturePad = false;
			},
			deleteSignature() {
				this.deleteable = false;
				uni.showModal({
					title: '提示',
					content: '确定要删除此签名吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$emit('input', undefined)
							this.$emit('change', undefined)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			close() {
				this.showSignaturePad = false;
			},
			handleLongPress() {
				this.deleteable = true;
				// 长按时弹出删除提示，也可以让用户主动点删除按钮时再提示
				this.deleteSignature();
			}
		}
	}
</script>

<style scoped>
	.field-signature ::v-deep .u-form-item--right__content__slot {
		width: 100px;
	}
	.hand-sign-box .hand-sign {
	  width: 100%;
	  background-color: #f7f7f7;
	  display: flex;
	  flex-direction: row;
	  justify-content: left;
	  align-items: center;
	  padding: 5px 10px;
	}
	.hand-sign-box .hand-sign .icon {
	  margin-right: 4rpx;
	  position: relative;
	  top: 1px;
	  width: 32rpx;
	  height: 32rpx;
	}
	.hand-sign-box .hand-sign:hover {
	  background-color: #efefef;
	}
	.hand-sign-box.disabled .hand-sign:hover {
	  cursor: not-allowed;
	}
	
	.hand-sign-box .sign-preview {
	  position: relative;
	  min-height: 100px;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: center;
	  -ms-flex-align: center;
	  align-items: center;
	  -webkit-box-pack: center;
	  -ms-flex-pack: center;
	  justify-content: center;
	  border: 1px solid #dcdfe6;
	  padding: 8px 0;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	.hand-sign-box .sign-preview img {
	  max-width: 100%;
	  cursor: pointer;
	}
	.hand-sign-box .sign-preview .preview-delete-icon {
	  position: absolute;
	  top: 5px;
	  right: 5px;
	  width: 32rpx;
	  height: 32rpx;
	  line-height: 32rpx;
	  text-align: center;
	  background-color: #ffffff;
	  cursor: pointer;
	  border-radius: 50%;
	  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	  /* display: none; */
	}
	.hand-sign-box .sign-preview .preview-delete-icon:hover {
	  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	}
	.hand-sign-box .sign-preview:hover .preview-delete-icon,
	.hand-sign-box.is-mobile .preview-delete-icon {
	  display: block;
	}
	.hand-sign-box.disabled .preview-delete-icon {
	  display: none !important;
	}
</style>